import { Component, OnInit, ViewChild } from '@angular/core';
import {  ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs/Observable'
import 'rxjs/add/observable/fromEvent'
import { Location } from '@angular/common';
import { appService } from '../my-service/app.service';
import { UtilService } from '../my-service/util.service'
import { canvasDustbinComponent } from '../canvas/canvasDustbin/canvasDustbin.component';
import { DomSanitizer } from '@angular/platform-browser';
import { notecanvasComponent } from './notecanvas/notecanvas.component';
import { chartsComponent } from './charts/charts.component';
import { dataComponent } from './data/data.component';
import { fadeIn } from '../animate';
import { questioncanvasComponent } from './questioncanvas/questioncanvas.component';//问题形画布

declare var $: any;

@Component({
  selector: 'canvas-root',
  templateUrl: './canvas.component.html',
  styleUrls: ['./canvas.component.css'],
  animations: [fadeIn]
})
export class canvasComponent implements OnInit {
  CanvasType: string;//canvas的类型
  FK_CanvasGroupGuid = this.route.snapshot.paramMap.get('CanvasGroupGuid');//获取CanvasGroupGuid
  FK_CanvasGuid: any;//canvasguid
  w; h;//main的初始尺寸
  OpenCharts = false;
  Opendata=false;
  mainW; mainH; marginTop;//main当前尺寸
  redius;//mainbox的比例
  scale = 100;//放大、缩小一次的刻度
  CanOpenLeft = false;//控制在得到数据后，才能打开左边canvas详情页
  LeftLoad = false;//表示canvas详情是否加载完成
  hidden = true;//控制mainbox滚动条是否出现
  OpenRight: boolean = false;//右边页是否能打开
  RightLoad: boolean = false;//表示右边页是否加载完成
  OpenCode: boolean = false;//控制打开二维码页面的
  clicked = false;
  clicked2: any = false;
  clicked3: boolean = false;
  clicked4: boolean = false;
  clicked5: boolean = false;
  MainRatio;
    trainMsg={
    tName:"加载中",
    tTime:'加载中',
    cName:'加载中',
    tDescription:'加载中',
    cCreator:'加载中',
  }
  canvasRate=0;
  isTrainMsgOpen=false;
  isRate=false;
  codemsg = { "w": "360", "h": "360", "type": "sm" };//二维码页面的尺寸
  @ViewChild('note')
  note: notecanvasComponent;//note画布类型的子组件
  @ViewChild('question')
  question: questioncanvasComponent;//question画布类型的子组件
  @ViewChild('questionDustbin')
  questionDustbin: canvasDustbinComponent;
  @ViewChild('charts')
  chartsComponent: chartsComponent;
  @ViewChild('data')
  dataComponent: dataComponent;
  private msgdata: any;//canvas详情数据，准备传给左边的canvas详情页
  constructor(
    private location: Location, private route: ActivatedRoute, 
    private appservice: appService, private utilService: UtilService,private sanitizer: DomSanitizer
  ) { }
  ngOnInit() {
    //获取基本信息
    this.appservice.getcanvasguid(this.FK_CanvasGroupGuid).then(re0 => {
      this.FK_CanvasGuid = re0.FK_CanvasGuid;
      this.trainMsg.tName=re0.Title
      this.trainMsg.tTime=re0.canvasgroupTime
      this.trainMsg.cName=re0.Name
      this.trainMsg.cCreator=re0.CreaterName
      this.trainMsg.tDescription=re0.Description
      this.canvasRate=re0.Score
      this.appservice.getcanvas(re0.FK_CanvasGuid).then(re => {
        this.msgdata = re;
        this.CanvasType = re.Type;
        this.MainRatio=re.MainRatio;
      }).then(() => {
        this.xiangying()
        this.LeftLoad = true;
      })
    })
    //box框架响应式
    Observable.fromEvent(window, 'resize')
      .subscribe((event) => {
        if (this.h !== $('.mainbox').height()) {
            this.xiangying()
        }
      });
  }
  rating(star){
    let data={
      Score:star*2,
      PK_CanvasGroupGuid:this.FK_CanvasGroupGuid
    }
    this.canvasRate=star*2
    // this.appservice.socre(data).then(re=>{
    //   this.utilService.remind('success','评分成功！')
    // })
  }
  xiangying() { 
    if ($('.mainbox').height() / $('.mainbox').width() >=  this.MainRatio) {
      this.mainW = this.w = $('.mainbox').width();
      this.mainH = this.h = this.w *  this.MainRatio;
      this.marginTop = ($('.mainbox').height() - this.mainH) / 2;
      this.redius = this.w / this.h;
    }
    else {
      this.mainH = this.h = $('.mainbox').height();
      this.mainW = this.w = $('.mainbox').height() /  this.MainRatio;
      this.redius = this.w / this.h;
    }
  }
  //删除
  Del($event) {
    this.questionDustbin.rebakc()
  }
  //分画布类型进行恢复操作,先去数据库改变status值后，
  //使用各自组件的恢复方法，再内存中加上恢复的标签，同时，控制回收站回到锚点页
  Recovery($event) {
    if (this.CanvasType == 'note') {
      this.appservice.recovery($event).then((re) => {
        this.note.Recovery($event);
        if (re.status == 1) {
          this.utilService.remind('success',`标签已恢复`)
         
        }
      }).then(() => {
        this.questionDustbin.rebakc();

        this.right()
      })
    }
    else if (this.CanvasType == 'question') {
      this.appservice.recovery($event).then((re) => {
        this.question.recovery($event);
        if (re.status == 1) {
          this.utilService.remind('success',`问题已恢复`)
       
        }
      }).then(() => {
        this.questionDustbin.rebakc();

       this.right()
      }) 
    }
  }
  innerLogoH5(div){
      return this.sanitizer.bypassSecurityTrustHtml(div)
  }
  /*------------------------------------------------------- 工具条以及容器的相关方法 ----------------------------------------------------------------*/
  //生成图表
  Canvascharts() {
    if (this.CanvasType == 'note') {
      let data = this.note.charts(this.CanvasType, this.msgdata.Name,'charts')
      this.OpenCharts = true;
      this.clicked4 = true;
      this.chartsComponent.charts(data);
    }
    else if (this.CanvasType == 'question') {
      let data = this.question.charts(this.CanvasType, this.msgdata.Name,'charts')
      this.OpenCharts = true;
      this.clicked4 = true;
      this.chartsComponent.charts(data);
    }
  }
  Canvasdata() {
    if (this.CanvasType == 'note') {
      let data = this.note.charts(this.CanvasType, this.msgdata.Name,'data')
      this.Opendata = true;
      this.clicked5 = true;
      this.dataComponent.Record(data);
    }
    else if (this.CanvasType == 'question') {
      let data = this.question.charts(this.CanvasType, this.msgdata.Name,'data')
      this.Opendata = true;
      this.clicked5 = true;
      this.dataComponent.Record(data);
    }
  }
  //容器放大
  lg() {
    if (this.mainH >= (this.h + (this.scale * 5))) {
      
      this.utilService.remind('success',`已经最大了`)
      return
    }
    this.hidden = false;
    this.mainH += this.scale;
    this.mainW += this.scale * this.redius;
  }
  //容器缩小
  sm() {
    if (this.mainH < (this.h + this.scale)) {
      this.hidden = true;
      this.utilService.remind('success',`已经最小了`)
    
      return
    }
    this.mainH = this.mainH - this.scale;
    this.mainW = this.mainW - (this.scale * this.redius);
  }
  //容器还原
  rester() {
    this.hidden = true;
    this.mainW = this.w;
    this.mainH = this.h;
  }
  //二维码弹出框打开方法
  opencode() {
    this.clicked3 = true;
    this.OpenCode = true;
  }
  closecode() {
    this.OpenCode = false;
  }
  //相关信息的打开
  openleft() {
    this.clicked = true;
    if (this.CanOpenLeft == false) {
      this.CanOpenLeft = true
      return
    }
    if (this.CanOpenLeft == true) {
      this.CanOpenLeft = false
      return
    }
  }
  //训练标题窗口的打开与否
  openTrainMsg(){
    this.isTrainMsgOpen=!this.isTrainMsgOpen;
  }
  //回收站部分的打开
  right() {
    this.clicked2 = true;
    if (this.OpenRight == false) {
      $('.imgRight').css('width','13px')
      
      $('.imgRight').animate({marginBottom:`${$('.open2').height()/2-12.5}px`},1000)
      this.OpenRight = true
      return
    }
    if (this.OpenRight == true) {
      $('.imgRight').css('width','20px')
      $('.imgRight').animate({marginBottom:'0px'},1000)
      this.OpenRight = false
      return
    }
  }
  //关闭回收站部分
  closeDustbin() {
    $('.imgRight').css('width','20px')
    $('.imgRight').animate({marginBottom:'0px'},1000)
    this.OpenRight = false;
  }
  //回到上一页
  goback() {
    this.location.back();
  }
  onCodeLG($event) {
    this.codemsg = {
      'w': '570',
      'h': '570',
      'type': 'lg'
    }
  }
  onCodeSM($event) {
    this.codemsg = {
      'w': '360',
      "h": "360",
      'type': "sm"
    };
  }
  CloseCharts() {
    this.OpenCharts = false;
    this.Opendata=false;
  }
  /*-----------------------------------------------------------------------------------------------------------------------------*/
} 
